<template>
	<view class="order">
		<nav-bar title="订单" :showLeftIcon="false" :rightSlot="true">
			<template slot="rightPart">
				<view class="order-open" v-if="checkPermit(['business:order:invoicing'])" @click="clickOpenOrder">开单
				</view>
			</template>
		</nav-bar>
		<view class="message align-center flex">
			{{ message }}
		</view>
		<!-- <view class="select" v-if="roles === 101 || roles === 100">
			<view class="shop">
				<view>选择门店:</view>
				<view class="choose" @click="selectClick">
					金牛湖店
					<view class="icon">
						<u-icon name="arrow-down" color="#666666" size="12"></u-icon>
					</view>
				</view>
			</view>
			<view class="shop">
				<view>选择技师:</view>
				<view class="choose" @click="selectClick">
					金牛湖店
					<view class="icon">
						<u-icon name="arrow-down" color="#666666" size="12"></u-icon>
					</view>
				</view>
			</view>
		</view> -->
		<tabList @clickTabsItem="clickTabsItem" :tabList="tabList" :tabActive="tabActive"></tabList>
		<scroll-view :style="{ height: height }">
			<bill-order :tabActive="tabActive" :orderList="orderList" @confirm="getOrderList"></bill-order>
		</scroll-view>
		<u-picker :show="show" :columns="columns" @cancel="show = false"></u-picker>
	</view>
</template>

<script>
	import {
		checkPermit
	} from '@/utils/permission'
	import YouPopup from '@/components/you-popup/index.vue'
	import NavBar from '@/components/nav-bar'
	import tabList from '@/components/tabList/index'
	import billOrder from '@/pages/billorder/components/orderCard.vue'
	import {
		getOrderData
	} from '@/api/system/home'
	export default {
		name: 'index',
		components: {
			NavBar,
			tabList,
			YouPopup,
			billOrder,
		},
		data() {
			return {
				height: '',
				message: '销售计划好借好还江湖救急',
				show: false,
				columns: [
					['中国', '美国', '日本']
				],
				tabActive: 1,
				tabList: [{
						label: '待服务',
						value: 1
					},
					{
						label: '服务中',
						value: 2
					},
					{
						label: '待评价',
						value: 3
					},
					{
						label: '已完成',
						value: 4
					},
					{
						label: '已退单',
						value: 5
					},
				],
				orderList: [],
				roles: '',
				atTime: '',
				checkPermit,
			}
		},
		created() {
			this.heightConfig = this.$store.getters.heightData
			this.scrollHeight = this.heightConfig.mainHeight - 80 + 'px'
		},
		onShow() {
			this.roles = uni.getStorageSync('roles')
			this.getOrderList()
			this.getTimeData()
		},
		methods: {
			getTimeData() {
				var currentDate = new Date()

				// 获取年、月、日、小时、分钟和秒
				var years = currentDate.getFullYear()
				var months = (currentDate.getMonth() + 1).toString().padStart(2, '0') // 月份从0开始，所以要加1，并补零
				var days = currentDate.getDate().toString().padStart(2, '0') // 补零
				var hourss = currentDate.getHours().toString().padStart(2, '0') // 补零
				var minutess = currentDate.getMinutes().toString().padStart(2, '0') // 补零
				var secondss = currentDate.getSeconds().toString().padStart(2, '0') // 补零

				// 拼接日期和时间字符串
				this.atTime = years + '-' + months + '-' + days + ' ' + hourss + ':' + minutess + ':' + secondss
			},
			getDayData() {
				const etime = Date.parse(new Date('2024-01-31 17:29:58'))
				const stime = Date.parse(new Date(this.atTime))
				// 两个时间戳相差的毫秒数
				const usedTime = etime - stime
				// 计算相差的天数
				const days = Math.floor(usedTime / (24 * 3600 * 1000))
				// 计算天数后剩余的毫秒数
				const leave1 = usedTime % (24 * 3600 * 1000)
				// 计算出小时数
				const hours = Math.floor(leave1 / (3600 * 1000))
				// 计算小时数后剩余的毫秒数
				const leave2 = leave1 % (3600 * 1000)
				// 计算相差分钟数
				const minutes = Math.floor(leave2 / (60 * 1000))
				// 计算分钟数后剩余的毫秒数
				const leave3 = leave2 % (60 * 1000)
				// 计算相差秒数
				const second = Math.floor(leave3 / 1000)
				const time = days + '天' + hours + '时' + minutes + '分' + second + '秒'
			},
			clickTabsItem(item) {
				this.tabActive = item.value
				this.getOrderList()
			},
			clickOpenOrder() {
				uni.navigateTo({
					url: '/subPages/order/orderBilling',
				})
			},
			selectClick() {
				this.show = true
			},
			getOrderList() {
				getOrderData({
					status: this.tabActive,
				}).then((res) => {
					// this.orderList = res.rows
					res.rows.forEach((item) => {
						const parts = item.subscribeStartTime.split(/[- :]/)
						const subscribeStartTime = new Date(parts[0], parts[1] - 1, parts[2], parts[3],
							parts[4], parts[5])

						// 获取当前时间
						const now = new Date()

						// 计算时间差（转换为分钟）
						const diffInMs = subscribeStartTime - now // 时间差（毫秒）
						const diffInMinutes = Math.round(diffInMs / (1000 * 60)) // 转换为分钟并四舍五入

						// 判断时间差的正负
						if (diffInMinutes < 0) {
							// 如果时间差为负数，则给item里面的timeOverPoint赋值
							item.timeOverPoint = Math.abs(diffInMinutes) // 取绝对值作为 timeOverPoint
						} else {
							// 如果时间差为正数，则给item里面的timePoint赋值
							item.timePoint = diffInMinutes
						}
					})
					this.orderList = res.rows
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.order-open {
		width: 100rpx;
		height: 65rpx;
		background-color: #fff;
		font-size: 30rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		color: #c27e15;
		text-align: center;
		line-height: 65rpx;
		border-radius: 14rpx;
	}

	.order {
		.message {
			height: 30px;
			background: #326a57;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;
			padding-left: 31rpx;
			color: #fff;
		}
	}

	.select {
		display: flex;
		padding: 30rpx 37rpx 0;
		background-color: #fff;

		.shop {
			display: flex;
			width: 50%;
			font-size: 28rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			line-height: 54rpx;

			.choose {
				// width: 179rpx;
				padding: 0 22rpx;
				line-height: 54rpx;
				height: 54rpx;
				border-radius: 9rpx 9rpx 9rpx 9rpx;
				opacity: 1;
				border: 1rpx solid #535353;
				display: flex;
				margin-left: 15rpx;

				.icon {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 5rpx;
				}
			}
		}
	}
</style>